import {ChangeEventHandler, FC, useState} from "react";
import {Box, TextField} from "@mui/material";
import DGDialogLayout from "../../../components/DGDialogLayout/DGDialogLayout.tsx";
import DGDrawerLayout from "../../../components/DGDrawerLayout/DGDrawerLayout.tsx";
import DGTextView from "../../../components/DGTextView.tsx";
import {useNavigate} from "react-router-dom";
import DGConnect from "../../../sources/DGConnect.ts";
import {Util} from "../../../sources/Util.ts";

interface DGRegNameProps {
    state: boolean,
    switchView: (text: string) => void,
}

const DGRegName: FC<DGRegNameProps> = ({state, switchView}) => {
    // 路由跳转
    const router = useNavigate();
    // 设置加载状态
    const [loading, setLoading] = useState(false);
    // 设置错误信息
    const [error, setError] = useState({state: false, text: ""});
    // 设置昵称信息
    const [name, setName] = useState("");
    // 重新流程
    const [step, setStep] = useState(false);

    // 重新流程
    const handleReturn = () => {
        // 切换面板
        switchView("reg_index");
        // 设置流程
        setStep(false);
        // 清空昵称信息
        setName("");
        // 清空密码错误信息
        setError({state: false, text: ""});
    }

    // 关闭函数
    const handleClose = () => {
        // 关闭面板弹窗
        switchView("");
        // 后退路由
        router(-1);
    }

    // 更改昵称信息
    const handleChangeName: ChangeEventHandler<HTMLInputElement> = e => {
        // 清空错误信息
        setError({state: false, text: ""});
        // 设置账号信息
        setName(e.target.value);
    }

    // 提交函数
    const handleSubmit = () => {
// 清空错误信息
        setError({state: false, text: ""});
        // 开始加载
        setLoading(true);
        // 发起设置昵称请求
        DGConnect.POST(JSON.stringify({type: "register", name: name}), result => {
            // 关闭加载
            setLoading(false);
            // 设置流程错误信息
            if (result["data"]["code"] === 999) {
                // 设置新流程
                setStep(true);
                // 设置错误信息
                return setError({
                    state: true, text: result["data"]["message"] + "点击确定将重新注册！错误码：" + result["data"]["code"]
                });
            }
            // 其他的
            if (result["data"]["code"] !== 200) return setError({
                state: true, text: result["data"]["message"] + " 错误码：" + result["data"]["code"]
            });
            // 增加昵称信息
            if (name === "") Util.Storage.setSession("REGISTER-NAME", result["data"]['result'] + "（随机）");
            if (name !== "") Util.Storage.setSession("REGISTER-NAME", name + "（自设）");
            // 成功跳转
            switchView("reg_result");
        }, error => {
            // 关闭加载
            setLoading(false);
            // 设置错误信息
            setError({state: true, text: "遇到了一些问题，请尝试重试，或者及时联系我们！错误信息：" + error["stack"]});
        });
    }


    // DOM 节点
    const ContentView = (<>
        {/* 提示语 */}
        <DGTextView Body Bold>
            太棒了，现在是最后一个步骤，现在请为您的账户设置一个独特且好听的昵称吧！
            如果您暂时没有想好，请留空，我们将会为您生成一个随机昵称。
        </DGTextView>
        {/* 输入框 */}
        <TextField
            type="text" label="请输入昵称：" margin="dense" variant="standard" disabled={loading}
            defaultValue={name} onChange={handleChangeName} error={error.state} helperText={error.text} fullWidth/>
    </>);

    // 返回组件节点
    return (<Box>
        {/* DGDialogLayout 样式 */}
        <DGDialogLayout
            submit={{name: step ? "确定" : "继续", click: () => step ? handleReturn() : handleSubmit()}}
            load={loading} title="更改您的昵称" state={state} close={() => handleClose()} PANEL>
            {ContentView}
        </DGDialogLayout>
        {/* DGDrawerLayout 样式 */}
        <DGDrawerLayout
            submit={{name: step ? "确定" : "继续", click: () => step ? handleReturn() : handleSubmit()}}
            load={loading} title="更改您的昵称" state={state} close={() => handleClose()} flex="bottom" PANEL>
            {ContentView}
        </DGDrawerLayout>
    </Box>);
}
export default DGRegName;